<script setup lang="ts">
import { ref } from 'vue'
// 引入手机号和密码的校验规则
import { mobileRules, passwordRules } from '@/utils/rules'
import { showFailToast, showSuccessToast } from 'vant'
import { loginByPasswordAPI, loginByCodeAPI } from '@/services'
import { useCodeByMobile } from '@/composables'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute() //存放路由信息
const router = useRouter() //存放路由方法
// 调用方法存数据
import { useUserStore } from '@/stores'
const store = useUserStore()

const mobile = ref<string>('13230000018') //手机号
const password = ref<string>('abc12345') //密码
const isAgree = ref(false) //用户协议
const isPassword = ref(true) //是否是密码登录
const code = ref('') //验证码
const { sendCode, time, refForm } = useCodeByMobile(mobile, 'login')

// 登录
const onSubmit = async () => {
  // 未勾选，校验不通过
  if (!isAgree.value) {
    return showFailToast('请勾选用户协议')
  }
  // 校验通过
  // 三元判断是短信短路还是密码登录
  const re = isPassword.value
    ? await loginByPasswordAPI(mobile.value, password.value)
    : await loginByCodeAPI(mobile.value, code.value)
  // console.log(re.data.token)
  // 存信息
  store.setUser(re.data)
  // 给出提示
  showSuccessToast('登陆成功')
  // 路由跳转   有returnUrl 就跳转到returnUrl的地址，没有就跳转到/user
  router.push((route.query.returnUrl as string) || '/user')
}

const qqURL =
  'https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=102015968&response_type=token&scope=all&redirect_uri=' +
  import.meta.env.VITE_APP_CALLBACK +
  '/login/callback'

const isShowPassword = ref(false) //控制是否显示密码
</script>

<template>
  <!-- unplugin-vue-components 可以自动注册写在components文件下面的组件 -->
  <div class="login-page">
    <cp-nav-bar
      title="登录"
      right-text="注册"
      @click-right="$router.push('/register')"
    ></cp-nav-bar>
    <!-- 头部 -->
    <div class="login-head">
      <h3>{{ isPassword ? '密码登录' : '短信验证码登录' }}</h3>
      <a href="javascript:;" @click="isPassword = !isPassword">
        <span>{{ !isPassword ? '密码登录' : '短信验证码登录' }}</span>
        <van-icon name="arrow"></van-icon>
      </a>
    </div>
    <!-- 表单 -->
    <van-form ref="refForm" autocomplete="off" @submit="onSubmit">
      <van-field
        name="mobile"
        v-model="mobile"
        :rules="mobileRules"
        placeholder="请输入手机号"
        type="tel"
      ></van-field>
      <van-field
        v-if="isPassword"
        v-model="password"
        :rules="passwordRules"
        placeholder="请输入密码"
        :type="`${isShowPassword ? 'text' : 'password'}`"
      >
        <template #button>
          <CpIcons
            @click="isShowPassword = !isShowPassword"
            :name="`${isShowPassword ? 'login-eye-on' : 'login-eye-off'}`"
          ></CpIcons>
        </template>
      </van-field>
      <van-field
        v-else
        v-model="code"
        center
        clearable
        placeholder="请输入短信验证码"
      >
        <template #button>
          <!-- 动态class {类名：布尔值} -->
          <span
            @click="sendCode"
            class="btn-send"
            :class="{ active: time > 0 }"
            >{{ time > 0 ? `${time}s后重新发送` : '发送短信验证码' }}</span
          >
        </template>
      </van-field>
      <div class="cp-cell">
        <van-checkbox v-model="isAgree">
          <span>我已同意</span>
          <a href="javascript:;">用户协议</a>
          <span>及</span>
          <a href="javascript:;">隐私条款</a>
        </van-checkbox>
      </div>
      <div class="cp-cell">
        <van-button block round type="primary" native-type="submit"
          >登 录</van-button
        >
      </div>
      <div class="cp-cell">
        <a href="javascript:;">忘记密码？</a>
      </div>
    </van-form>
    <!-- 底部 -->
    <div class="login-other">
      <van-divider>第三方登录</van-divider>
      <!-- 跳转到QQ登录界面 点击时把回调地址存入本地，方便登陆成功之后回到当时页面-->
      <a
        @click="store.setReturnUrl($route.query.returnUrl as string)"
        class="icon"
        :href="qqURL"
      >
        <img src="@/assets/qq.svg" alt="" />
      </a>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/styles/login.scss';
</style>
